import React, { Component, useState, useRef } from 'react';
import { Form, Input, InputNumber, Button,message } from 'antd'; 
import {changepassword} from './service.js'
import { useEffect } from 'react';
const Center=props=>{
  const [username,setusername]=useState('')
  const layout = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 10,
    },
  };
  useEffect(()=>{
    let perinfo=JSON.parse(sessionStorage.getItem('personinfo'))
    setusername(perinfo.username)
    console.log(perinfo)
  },[])

  const onFinish = async values=> {
    // 先判断密码两次输入的值是否相同在提交
    const passwordReg = /^(?=.*\d)(?=.*[a-zA-Z]).*$/;
    const value=values.user.newPassword
    values.user.username=username
    console.log(values)
    if (values) {
      console.log(111111111)
      if (!passwordReg.test(value)) {
        console.log(1111111111111)
        alert('密码必须同时包含大小写字母、和数字')   
        return;      
      }
      if (value.length < 6 || value.length > 12) {
        alert('密码长度6-12位')
        return;      

      }
      // 判断旧密码和新密码是否相同再提交接口。等a有值执行后面
      
      let res = await changepassword(
        values.user
       );
       message.success(res['message']);
  }
  };
  return (
    <Form {...layout} name="nest-messages" onFinish={onFinish} >
        <Form.Item name={['user', 'username']} label="输入账号">
  <span>{username}</span>
    </Form.Item>
    <Form.Item
      name={['user', 'password']}
      label="原始密码"     
      rules={[
        {
          required: true,
          message: '必填信息!'
        },
      ]}
    >
      <Input.Password placeholder="请输入您的原始密码"/>
    </Form.Item>
    <Form.Item
      name={['user', 'newPassword']}
      label="设新密码"
      rules={[
        {
          required: true,
          message: '必填信息!'
        },
      ]}
    >
      <Input.Password placeholder="请设置6-12位新密码，需要字母和数字组合"/>
    </Form.Item>
   
  
  
    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
  )
}
export default Center